📌 資料夾架構

scss/
│── abstracts/ # 抽象層：變數、函式、mixin
│── base/ # 基礎樣式：reset、typography、全域設定
│── components/ # 元件：button、card、navbar
│── layout/ # 版面配置：grid、header、footer
│── pages/ # 頁面專屬樣式：home.scss、about.scss
│── themes/ # 主題：dark.scss、light.scss
│── vendors/ # 外部套件覆寫：bootstrap.scss
│── main.scss # 入口檔：統一匯入所有樣式

📌 各資料夾用途 + 範例

1. abstracts/

👉 存放「全專案共用」但不會直接輸出 CSS 的東西。

• _variables.scss → 顏色、字體、間距

• _mixins.scss → 常用樣式片段

• _functions.scss → 計算函式（例如 px → rem）

2. base/

👉 全域基礎樣式，通常專案一開始就會套用。

• _reset.scss → Reset/Normalize

• _typography.scss → 預設字體設定

• _global.scss → 全域 HTML / body 樣式

3. components/

👉 專案中可重複使用的元件。每個元件一個檔案。

• _button.scss

• _card.scss

• _navbar.scss

4. layout/

👉 版面配置，主要負責架構（header, footer, grid）。

• _header.scss

• _footer.scss

• _grid.scss

5. pages/

👉 頁面專屬樣式，只會用在特定頁面。

• _home.scss

• _about.scss

6. themes/

👉 不同主題（例如深色模式、品牌客製化）。

• _dark.scss

• _light.scss

7. vendors/

👉 外部套件覆寫（例如 Bootstrap、Swiper）。

• _bootstrap.scss

• _swiper.scss

8. main.scss

👉 唯一需要被 JS 匯入的檔案，統一管理所有 @use / @forward。

📌 團隊協作規則

1.一檔一責任：

button.scss 只管 button，不要順手寫 navbar。

2.命名規範：BEM
3.巢狀最多 3 層，避免難維護
4.Lint 工具 → 安裝 stylelint + stylelint-scss，自動檢查風格。
5.新人守則 → 新增樣式時必須放對資料夾，不得直接塞到 main.scss。

🎯 總結

• 架構用 7–1 Pattern：abstracts, base, components, layout, pages, themes, vendors, main.scss。

• 匯入統一走 main.scss，避免各自 import。

• 命名採 BEM，避免 class 混亂。

• SCSS 模組化原則：抽象共用 → 基礎 → 元件 → 版面 → 頁面 → 主題 → 外部套件。